<template>
	<view class="charts-box justify-center align-center">
		<u-navbar back-text="返回" title="实时数据" @leftClick="backFn">
			<view slot="right" @click="show = true">
				<u-icon name="calendar" size="26px"></u-icon>
			</view>
		</u-navbar>
		<view class="content">
			<view class="canvasView" v-if="canvasShow">
				<qiun-data-charts type="line" :ontouch="true" :opts="opts" :chartData="chartData" />
			</view>
			<u-empty v-else style="position: fixed;top: 0;left: 0;bottom: 0;right: 0;" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<u-calendar allowSameDay :max-date="maxDate" :min-date="minDate" :monthNum="14" closeOnClickOverlay @close="show=false" @confirm="confirmFn"
			:defaultDate="defaultDate" mode="range" :show="show"></u-calendar>
	</view>
</template>

<script>
	import {
		getDataAnalysis_rk
	} from "@/api/app/dataAnalysis.js";

	export default {
		data() {
			return {
				show: false,
				chartData: {},
				opts: {},
				id: "",
				minDate:new Date((new Date().getFullYear()-1) + '-' + (new Date().getMonth() + 1) + '-01' + ' ' + '00:00:00').getTime(),
				maxDate:new Date(new Date().getFullYear() + '-' + (new Date().getMonth() + 1) +'-'+ new Date().getDate()+ ' ' + '23:59:59' ).getTime(),
				defaultDate: [
				new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() ,
				new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() 
				],
				canvasShow: true,
				pageInfo: {
					"deviceAddr": '',
					"nodeId": -1,
					"startTime": new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' ' + '00:00:00',
					"endTime": new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() +
						' ' + '23:59:59'
				}
			};
		},
		async onLoad(options) {
			this.pageInfo.deviceAddr = Number(options.deviceAddr);
			await this.getDataAnalysisFn();
		},
		methods: {
			async getDataAnalysisFn() {
				let res = await getDataAnalysis_rk(this.pageInfo);
				if (res.length == 0) {
					this.canvasShow = false
					return
				} else {
					this.canvasShow = true
				}
				res.sort((a, b) => b.recordTime - a.recordTime);
				console.log(res);
				let categories = [];
				let series = [];
				let tempObj = {};
				res.forEach((v,i) => {
					if(!categories.includes(v.recordTimeStr.slice(5,-3))){
						categories.push(v.recordTimeStr.slice(5,-3))
					}
					v.data.forEach(item=>{
						let obj = series.find(val=>val.name==item.registerName);
						if(obj){
							obj.data.push(item.value)
						}else{
							series.push({
								name:item.registerName,
								data:[item.value]
							})
						}
					})
				})
				this.chartData = {
					categories: categories,
					series: series,
				};
				this.opts = {
					animation: true,
					dataLabel: false,
					padding: [30, 10, 50, 10],
					enableScroll: true,
					disableScroll: true,
					legend: {
						position: "bottom",
						itemGap: "40",
						lineHeight: "30",
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						rotateLabel: true,
						marginTop: "10",
						rotateAngle: "60",
						itemCount: 5,
						scrollAlign: "left",
						scrollBackgroundColor: "#F7F7FF",
						scrollColor: "#DEE7F7",
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow",
							showLabel: true,
						},
						tooltip: {},
					},
				};
			},
			backFn() {
				uni.navigateBack();
			},
			confirmFn(val) {
				console.log(val);
				this.show = false;
				this.defaultDate = val;
				this.pageInfo.startTime = val[0]+' 00:00:00';
				this.pageInfo.endTime = val[val.length-1]+' 23:59:59';
				this.getDataAnalysisFn();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;

		.content {
			margin-top: 44px;
			width: 100%;

			.canvasView {
				width: 100%;
				height: calc(100vh - 44px);
			}
		}
	}

	/deep/ uni-button {
		background-color: rgb(60, 156, 255) !important;
	}
</style>